<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div0 {
				background-color: red;
				/* height: 100px; */
				/* overflow: auto; */
				/* 关闭文档流 */
			}
			.div1 {
				height: 100px;
				width: 100px;
				background-color: #0000FF;
				float: left;
			}
			/* 使用伪元素
					:元素名称
					::元素名称
					:after：在哪个元素之底部，依然在元素范围之内
					:before：在哪个元素之顶部
			 */
			.div0::after {
				display: block;
				content: "";
				clear: both;
			}
			
			.div2 {
				height: 100px;
				background-color: green;
			}
			
			.clear {
				clear: left;
			}
		</style>
	</head>
	<body>
		<div class="div0">
			<div class="div1">
				
			</div>
			<!-- 会增加代码 -->
			<!-- <div class="clear">
				
			</div> -->
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>
